<template>
  <div class="crmCustomer">
    <el-card>
      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p>
          <p
            v-if="
              showBtn &&
                selectedNum === 1 &&
                selectionCustomer &&
                selectionCustomer[0].customer_status !== 'runaway'
            "
            @click="lossCustomerModal = true"
          >
            <i class="iconfont icon-liushi"></i>
            已流失
          </p>
          <p v-if="showBtn && selectedNum === 1" @click="showLatent">
            <i class="iconfont icon-fenpai"></i>
            分派
          </p>
        </div>
        <div class="opt_wrap_right">
          <p @click="importList">
            <i class="iconfont icon-daoru1"></i>
            导入
          </p>
          <p @click="exportCustomer">
            <i class="iconfont icon-daochu"></i>
            导出
          </p>
          <!-- <el-button type="text" @click="goToURL('customerDetails','create')">
                    <i class="iconfont icon-add"></i>
                    新建
                </el-button> -->
          <p class="add" @click="goToURL('customerInfo', 'create')">
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新建
          </p>
        </div>
      </div>
      <statisticsTag
        v-if="statisticsTagData"
        :data="statisticsTagData"
        @searchStatus="searchStatus"
      />
      <div class="search_wrap">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input
              placeholder="潜客姓名/潜客编号/潜客手机号/负责人"
              v-model="searchCondition"
              clearable
              style="width: 260px;"
              @keyup.enter.native="queryListData"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="queryDate"
              @change="queryListData"
              type="daterange"
              range-separator="~"
              start-placeholder="注册日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="intention"
              placeholder="意向产品"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in intentionList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="customer_status"
              placeholder="潜客状态"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in statisticsTagData"
                :key="item.index"
                :label="item.label"
                :value="item.status"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <!-- <el-select v-model="source" placeholder="来源">
                <el-option v-for="item in sourcese" :key="item.index" :label="item.label" :value="item.value">
                    {{ item.label }}
                </el-option>
            </el-select> -->
      </div>
      <div class="table_list">
        <el-table
          ref="customerTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionCustomer"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="40" />
          <el-table-column label="潜客编号" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.sno }}</p>
            </template>
          </el-table-column>
          <el-table-column label="潜客姓名" align="center">
            <template slot-scope="scope">
              <p
                class="see_detail"
                @click="goToURL('customerInfo', 'details', scope.row.id)"
              >
                {{ scope.row.name }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
            :width="item.value === 'status' ? '60' : ''"
          >
            <template slot-scope="scope">
              <span v-if="item.value != 'status'">{{
                scope.row[item.value]
              }}</span>
              <el-switch
                v-else
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
                @click.native="changeStatus(scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="来源" align="center">
            <template slot-scope="scope">
              <div class="flag" :style="{ background: scope.row.source_arr.c }">
                {{ scope.row.source_arr.a }}
              </div>
            </template>
          </el-table-column>
          <!-- {{statisticsTagData}} -->
          <el-table-column label="潜客状态" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.customer_status | filterCustomerStatus }}</p>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.create_time }}</p>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center"  width="120">
                    <template slot-scope="scope">
                        <el-row type="flex" align="center">
                            <el-col :span="8" >
                                <el-button type="text"  size="small" circle  @click="goToURL('customerDetails','edit',scope.row.id)">编辑</el-button>
                            </el-col>
                            <el-col :span="8" >
                                <el-button type="text" size="small" circle  @click="handleDelete(scope.row.id)">删除</el-button>
                            </el-col>
                            <el-col :span="8" >
                                <el-button type="text" size="small" circle  @click="goToURL('customerInfo','details',scope.row.id)">详情</el-button>
                            </el-col>
                        </el-row>
            　　　　</template>
                </el-table-column> -->
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
    <!-- 对话框 -->
    <div>
      <!-- 删除对话框 -->
      <el-dialog
        title="提示"
        width="510px"
        :visible.sync="showDelModal"
        class="del_modal"
      >
        <div class="content">
          <p><i class="iconfont icon-tishi"></i></p>
          <p v-if="selectionCustomer.length === 1">
            是否将客户<span>{{ selectionCustomer[0].name }}删除？</span>
          </p>
          <p v-if="selectionCustomer.length > 1">
            是否将<span
              >{{ selectionCustomer[0].name }}、{{ selectionCustomer[1].name
              }}<span v-if="selectionCustomer.length > 2">等</span
              >{{ selectionCustomer.length }}位客户删除？</span
            >
          </p>
          <p>删除成功之后，该操作将无法恢复</p>
        </div>
        <div class="btn">
          <el-button @click="showDelModal = false">返回</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </el-dialog>
      <!-- 流失对话框 -->
      <el-dialog
        title="流失客户"
        width="510px"
        :visible.sync="lossCustomerModal"
      >
        <div>
          <el-form
            ref="lossForm"
            :model="lossFormData"
            :rules="lossRules"
            label-position="right"
            label-width="80px"
          >
            <el-form-item label="流失原因" prop="remark">
              <el-input
                type="textarea"
                rows="5"
                v-model="lossFormData.remark"
                style="width: 320px;"
                placeholder="请填写流失原因"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn">
          <el-button @click="lossCustomerModal = false">返回</el-button>
          <el-button type="primary" @click="confirmLossCustomer"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!-- 分派潜客 -->
      <el-dialog
        title="分派潜客"
        width="510px"
        :visible.sync="showLatentModal"
        class="latent_modal"
      >
        <div class="content">
          <el-input
            class="search_teacher"
            placeholder="请输入内容"
            v-model="searchTeacher"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <div class="radio">
            <div v-for="teacher in teachers" :key="teacher.id">
              <el-radio
                v-model="selectTeacher"
                :label="teacher.id"
                @change="changeAsssign"
                >{{ teacher.name }}</el-radio
              >
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button @click="showLatentModal = false">返回</el-button>
          <el-button type="primary" @click="confirmAssign">确认</el-button>
        </div>
      </el-dialog>
      <!-- 导入潜客信息 -->
      <el-dialog title="导入潜客信息" width="579px" :visible.sync="importModal">
        <div class="excelContent">
          <el-steps :active="active" finish-status="success">
            <el-step title="上传文档"></el-step>
            <el-step title="导入数据"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
          <div v-if="active !== 3">
            <p>一、请按照数据模板的格式准备要导入的数据。</p>
            <p @click="downloadExcel">下载数据模板</p>
            <p>
              <span>注意事项：</span><br />
              1.表格首行字段名，不能删除。<br />
              2.字段标“必填”字段，请务必填写。<br />
              1.表格首行字段名，不能删除，表格首行字段。<br />
              2.字段标“必填”字段，请务必填写“必填”字段。
            </p>
            <p>二、请选择需要导入的XLSX文件。</p>
            <p>单个文件不得大于1M</p>
            <el-upload
              class="upload-demo"
              :action="uploadCustomerExcelURl"
              :headers="headers"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :on-progress="progressUpload"
              :file-list="fileList"
              style="padding-left: 30px; margin-bottom: 30px;"
            >
              <el-button size="small" type="primary">导入文件</el-button>
            </el-upload>
          </div>
          <div
            v-if="active === 3"
            style="display: flex;flex-direction: column;align-items: center;"
          >
            <p>
              <i
                class="iconfont icon-yiwancheng"
                style="font-size: 80px; color: #0182D9"
              ></i>
            </p>
            <p style="padding: 0px;">导入完成</p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { uploadCustomerExcelURl, downloadCustomerExcelURL } from "@/utils/url";
import statisticsTag from "@/components/statisticsTag";
import http from "@/api/customer";
import contractHttp from "@/api/contract_type";
import globalApi from "@/api/global";
import { changeTitleMinin, deleteMixin, paginationMixin } from "@/mixin";
import { formatDate } from "@/utils";
export default {
  name: "customerManage",
  mixins: [changeTitleMinin, deleteMixin, paginationMixin],
  data() {
    return {
      // ---
      active: 1,
      headers: null,
      uploadCustomerExcelURl,
      downloadCustomerExcelURL,
      fileList: [],
      active: 1,
      customer_status: null,
      statisticsTagData: [],
      source: "",
      product: "",
      state: "",
      products: [],
      states: [],
      sourcese: [],
      selectionCustomer: [],
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      showLatentModal: false,
      lossCustomerModal: false,
      searchTeacher: null,
      selectTeacher: null,
      status: "",
      teachers: [],
      // ---
      tableListData: [],
      tableCaption: [],
      loading: false,
      dialogVisible: false,
      lossFormData: {},
      lossRules: {
        remark: [{ required: true, message: "请填写流失原因" }]
      },
      form: {},
      rules: {
        name: [{ required: true, message: "请填写姓名" }],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式有误",
            trigger: "blur"
          }
        ]
      },
      http: http,
      searchCondition: null,
      queryDate: null,
      optionsData: [
        {
          label: "未付全款待确认",
          total: 10,
          icon: "icon-weifukuan-",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "已付全款待确认",
          total: 110,
          icon: "icon-yifukuan",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751"
        },
        {
          label: "执行中",
          total: 1000,
          icon: "icon-zhihangzhong",
          backgroundStart: "#ffc31f",
          backgroundEnd: "#ffa41e"
        },
        {
          label: "即将到期",
          total: 0,
          icon: "icon-jijiangdaoqi",
          backgroundStart: "#a946eb",
          backgroundEnd: "#9346eb"
        },
        {
          label: "已结束",
          total: 0,
          icon: "icon-yijieshu",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        },
        {
          label: "已终止",
          total: 0,
          icon: "icon-yizhongzhi",
          backgroundStart: "#999",
          backgroundEnd: "#999"
        }
      ],
      delNiche: null,
      intentionList: [],
      intention: null,
      teacher_id: null,
      importModal: false,
      backgroundStart: [
        "#17B5EB",
        "#F27450",
        "#ffc31f",
        "#a946eb",
        "#02c779",
        "#17B5EB",
        "#F27450",
        "#ffc31f",
        "#a946eb",
        "#02c779"
      ],
      backgroundEnd: [
        "#1797EB",
        "#F25751",
        "#ffa41e",
        "#9346eb",
        "#02c765",
        "#1797EB",
        "#F25751",
        "#ffa41e",
        "#9346eb",
        "#02c765"
      ]
    };
  },
  filters: {
    filterCustomerStatus(val) {
      let customerStatus = JSON.parse(sessionStorage.getItem("customerStatus"));
      let value = "";
      for (let status of customerStatus) {
        if (status.status === val) {
          value = status.label;
          break;
        }
      }
      return value;
    }
  },
  components: {
    statisticsTag
  },
  methods: {
    beforeUpload(file) {
      console.log(file);
      const fileType =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!fileType) {
        this.$message.error("导入文件只能是XLSX格式!");
      }
      if (!isLt1M) {
        this.$message.error("导入文件小于1M！");
      }
      return fileType;
    },
    progressUpload() {
      this.active = 2;
    },
    handleSuccess() {
      this.$message.success("导入文件成功！");
      this.active = 3;
    },
    // 下载模板
    downloadExcel() {
      window.open(
        "https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/excel/customer.xlsx"
      );
    },
    // 导入数据
    importList() {
      this.importModal = true;
      this.active = 1;
    },
    // 分派
    showLatent() {
      http.getTeacherList().then(res => {
        this.teachers = res.data.data;
      });
      this.showLatentModal = true;
    },
    // 确认分派
    confirmAssign() {
      let params = {
        user_id: this.selectionCustomer[0].id,
        teacher_id: this.teacher_id
      };
      http.assignCustomer(params).then(res => {
        this.$message.success(res.msg || "分派成功！");
        this.showLatentModal = false;
        this.getListData();
      });
    },
    // 切换负责人
    changeAsssign(val) {
      this.teacher_id = val;
    },
    // 导出潜客
    exportCustomer() {
      let token = sessionStorage.getItem("access_token");
      let create_time_start = "";
      let create_time_end = "";
      if (this.queryDate) {
        create_time_start = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        create_time_end = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      if (this.searchCondition) {
        this.searchCondition = this.searchCondition;
      } else {
        this.searchCondition = "";
      }
      if (this.customer_status) {
        this.customer_status = this.customer_status;
      } else {
        this.customer_status = "";
      }
      if (this.intention) {
        this.intention = this.intention;
      } else {
        this.intention = "";
      }
      let config = `token=${token}&search=${this.searchCondition}&customer_status=${this.customer_status}&intention=${this.intention}&create_time_start=${create_time_start}&create_time_end=${create_time_end}`;
      // console.log(`http://webi-dev.jingqiweb.com/api.php/center/customer/export_excel?${config}`)
      window.open(`${this.downloadCustomerExcelURL}?${config}`);
    },
    confirmLossCustomer() {
      this.$refs["lossForm"].validate(valid => {
        if (valid) {
          let params = {
            user_id: this.selectionCustomer[0].id,
            remark: this.lossFormData.remark
          };
          http.lossCustomer(params).then(res => {
            this.$message.success(res.msg || "操作成功！");
            this.lossCustomerModal = false;
            this.this.getListData();
          });
        } else {
          this.$message.warning("请填写完整信息！");
        }
      });
    },
    confirmDelete() {
      let id = this.delNiche;
      http.deleteContent({ id }).then(res => {
        this.$message.success(res.msg || "删除成功");
        this.showDelModal = false;
        this.getListData();
      });
    },
    goToURL(name, pageType, id) {
      this.$router.push({ name, params: { pageType, id } });
    },
    goToURL2(name, pageType, id) {
      this.$router.push({ name, query: { pageType, id } });
    },
    queryListData() {
      this.getListData();
    },
    searchStatus(status) {
      this.customer_status = status;
      this.getListData();
      console.log("status:", status);
    },
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      customer_status = this.customer_status,
      intention = this.intention
    ) {
      this.loading = true;
      let params = { page, list_rows, search, customer_status, intention };
      if (this.queryDate) {
        params["create_time_start"] = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        params["create_time_end"] = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      http.getList(params).then(res => {
        this.loading = false;
        this.total = res.data.total;
        this.tableCaption = [
          {
            label: "性别",
            value: "sex"
          },
          {
            label: "联系电话",
            value: "mobile"
          },
          {
            label: "出生日期",
            value: "birthday"
          },
          {
            label: "意向产品",
            value: "intention"
          },
          {
            label: "负责人",
            value: "teacher_name"
          }
        ];
        let tableListData = res.data.data;
        if (tableListData.length) {
          tableListData.map(item => {
            item.birthday = formatDate.toStr(
              new Date(item.birthday),
              "YYYY-MM-DD"
            );
            item.sex = item.sex === 1 ? "男" : "女";
          });
        }
        this.tableListData = tableListData;
      });
    },
    handleSelectionCustomer(val) {
      this.selectionCustomer = val;
      console.log(val);
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
        }
      }
    }
  },
  created() {
    this.getListData();
    http.getCustomerStatus().then(res => {
      this.statisticsTagData = res.data;
      this.statisticsTagData.map((item, index) => {
        item.icon = "icon-weifukuan-";
        item.backgroundStart = this.backgroundStart[index];
        item.backgroundEnd = this.backgroundEnd[index];
      });
    });
    // 获取产品意向
    let varname = "intention";
    globalApi.getWebConfig({ varname }).then(res => {
      this.intentionList = res.data;
    });
  },
  mounted() {
    contractHttp.getAllProduct().then(res => {
      this.products = res.data;
    });
    this.headers = {
      token: sessionStorage.getItem("access_token")
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/listPage.scss";

.crmCustomer {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .flag {
    padding: 0px 5px;
    background: #c6c7c9;
    color: #fff;
    border-radius: 14px;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    margin: 20px 0;
    div {
      //   margin-right: 17px;
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .excelContent {
    & > div {
      padding: 0 50px;
      p {
        color: #999;
        font-size: 14px;
        &:nth-of-type(1) {
          margin-top: 30px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        &:nth-of-type(2) {
          padding-left: 30px;
          margin-bottom: 18px;
        }
        &:nth-of-type(3) {
          padding-left: 30px;
          background: #f5f5f5;
          line-height: 20px;
          padding: 16px 0 16px 20px;
          border-radius: 10px;
          margin-bottom: 30px;
        }
        &:nth-of-type(4) {
          font-weight: 600;
        }
        &:nth-of-type(5) {
          color: #b2b2b2;
          padding-left: 30px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .latent_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
